레이아웃 밀림 (Layout Shift)

웹 애플리케이션에서 이미지 또는 동적 콘텐츠 로딩 후 레이아웃 밀림(Layout Shift) 문제는 사용자 경험(UX)에 영향을 미칠 수 있습니다. 이를 방지하는 다양한 기법을 알아보고 최적의 해결 방법을 정리힙니다.

1️⃣ 레이아웃 밀림이란?

레이아웃 밀림은 웹 페이지에서 요소의 크기가 동적으로 변하면서 다른 요소들이 예상치 못하게 이동하는 현상입니다. 이는 Cumulative Layout Shift (CLS) 문제로도 알려져 있으며, 웹 성능 측정 지표 중 하나로 중요하게 다뤄집니다.

🔹 주요 원인

• 이미지 크리 미지정: <img> 태그에서 너비(width)와 높이(height) 속성을 지정하지 않으면, 브라우저가 이미지 로드 후 크기를 결정하여 레이아웃이 변함
• 웹 폰트 로딩 지연: 기본 폰트에서 웹 폰트로 전환될 때 텍스트 크기가 변하면서 레이아웃이 밀릴 수 있음
• 광고 또는 동적 콘텐츠 로드: 광고 또는 비동기 데이터가 로드될 때 기존 요소들이 아래로 밀려남

2️⃣ 해결 방법

🔹 이미지 크기 미리 지정하기

이미지의 크기를 미리 설정하면 브라우저가 공간을 확보하여 레이아웃 변경을 방지할 수 있습니다.

🧐 예시

<img src="image.jpg" width="800" height="450" alt="Example Image" />

✔️ width 및 height 속성을 지정하면 브라우저가 해당 공간을 미리 예약하여 레이아웃 밀림을 방지할 수 있습니다.

🔹 비율을 유지하는 wrapper 사용

CSS의 padding-top을 활용하여 이미지 비율을 유지하면서 공간을 확보하는 방법입니다.

.wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 비율 (9 / 16 * 100) */
}

.wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

✔️ 이미지가 로드되기 전에 비율을 유지할 공간을 확보하여 밀림 현상을 방지할 수 있습니다.

🔹 aspect-ratio 속성 사용

CSS의 aspect-ratio 속성을 사용하면 더욱 간결하게 비율을 지정할 수 있습니다.

img {
  width: 100%;
  aspect-ratio: 16 / 9;
}

✔️ 최신 브라우저에서 지원되며, 간단한 코드로 이미지 비율을 유지할 수 있습니다.

❗ 구형 브라우저에서는 지원하지 않을 수 있으므로, 호환성 체크가 필요합니다.